import React from 'react'
import $ from 'jquery'
import _ from 'underscore'
import cx from 'classnames'

import View from 'lib/View.jsx'
import Layout from '../common/layout.jsx'
import Card from 'lib/components/card.jsx'
import AutoComplete from 'lib/components/AutoComplete.jsx'
// import ImsiTip from './ImsiTip.jsx'
import {Success,Info,Warning} from 'lib/components/Notify.jsx'
import TimeStore from 'lib/stores/time-store'

export default class MainView extends View{
  constructor(props, context){
    super(props, context)
    this.searchImsi = this.searchImsi.bind(this)
    this.getIMSIResult = this.getIMSIResult.bind(this)
    this.toggleHint = this.toggleHint.bind(this)

    this.state.showHint = false;
  }
  searchImsi(text,options){
    return $.ajax({
      url:BlueWare.urlPrefix+'/app/'+BlueWare.appId+'/custom/search_users.json',
      dataType:'json',
      data:_.extend({
        userIdentifier:text,
        limit:10,
        force:options.source === 'enter'
      }, TimeStore.getValue())
    }).promise()
  }
  componentDidMount(){
    super.componentDidMount()
    Info(
      <div>
        {BlueWare.isAndroid?(
          <p>
            Android Agent版本更新至2.0.0以上可用
          </p>
        ):(
          <p>
            iOS Agent版本更新至1.2.0以上可用
          </p>
        )}
      </div>
    , {
      autoClose:false
    })
  }
  getIMSIResult(text){
    if (typeof text === 'string') {
      return;
    }
    this.props.history.pushState(null, '/user/'+encodeURIComponent(text.label));
  }
  toggleHint() {
    this.setState({
      showHint: !this.state.showHint
    });
  } // toggleHint
  render(){
    return (
      <Layout title="用户信息搜索" subtitle="" hideVersion={true}>
        <div className="float-position-relative">
          <div className="pure-g">
            <div className="pure-u-1">
              <div className="box">
                <Card title={
                    <span>
                      请输入完整用户信息
                      {/*<i className="iconfont" data-tip={ImsiTip}>&#xe663;</i>*/}
                    </span>
                  }
                  extra={
                    <i className={ cx('iconfont', {rotate90: this.state.showHint, rotate270: !this.state.showHint}) } onClick={ this.toggleHint }>&#xe658;</i>
                  }>
                  {
                    this.state.showHint ? (BlueWare.isAndroid ?
                    <Card>
                      <p>OneAPM允许您添加用户信息，并根据所配置的用户信息查询该用户15天内发生的崩溃信息。我们为Android APP提供API：</p>
                      <code style={{ margin: '6px 0' }}>ContextConfig contextConfig = new ContextConfig();<br />contextConfig.setSearchField("user_imsi_custom");</code>
                      <p>详情：<a href="http://www.oneapm.com/mi/android.html" target="__blank">{'http://www.oneapm.com/mi/android.html'}</a></p>
                    </Card> :
                    <Card>
                      <p>OneAPM允许您添加用户信息，并根据所配置的用户信息查询该用户15天内发生的崩溃信息。我们为iOS APP提供API：</p>
                      <code style={{ margin: '6px 0' }}>{'[OneAPM setCustomInfo:@"custom-username"];'}</code>
                      <p>详情：<a href="http://www.oneapm.com/mi/ios.html" target="__blank">{'http://www.oneapm.com/mi/ios.html'}</a></p>
                    </Card>)
                     : null
                  }
                  <AutoComplete
                    className="input-text"
                    promiseFn={this.searchImsi}
                    parseFn={(data) => data.map((d) => ({label:d}))}
                    onComplete={this.getIMSIResult}
                    defaultValue={this.props.routeParams.userIdentifier?decodeURIComponent(this.props.routeParams.userIdentifier):''}
                    enterSearch={false}
                  />
                </Card>
              </div>
            </div>
          </div>
          <div className="pure-g">
            <div className="pure-u-1">
              <div className="box">
                { React.cloneElement(this.props.children, { routeParams: this.props.params, key: this.getHandlerKey() }) }
              </div>
            </div>
          </div>
        </div>
      </Layout>
    )
  }
}
// function parseIMSIText(data){
//   return
// }
